<script setup lang="ts">
import dayjs from 'dayjs'
import type { InfoGridItem } from './ProjectTable.vue'
import { useProjectConfigStore } from '@/store/projectConfig'

const props = defineProps<{
  item: AfterSalesDetail
}>()

defineEmits(['callContact', 'copewith', 'uploadProof'])

const projectConfigStore = useProjectConfigStore()

function getTableInfo(): InfoGridItem[] {
  return [
    { label: '业务员', value: props.item.salesman_name || '未知' },
    { label: '项目总额', value: `¥${props.item.money_total}`, color: '#FF2636' },
    { label: '装修类型', value: props.item.project_type_name || '未知' },
    { label: '工期截止', value: props.item.duration ? dayjs.unix(Number(props.item.duration)).format('YYYY.MM.DD') : '未知' },
    { label: '装修面积', value: props.item.extent?.toString() || '未知' },
  ]
}

function getStatusTagColor() {
  if (props.item.status?.toString() === '1')
    return '#FF6D0A'
  else if (props.item.status?.toString() === '2')
    return '#617FFF'
  else if (props.item.status?.toString() === '3')
    return '#0FCB71'
  else
    return '#FF6D0A'
}
</script>

<template>
  <view class="flex flex-col bg-white rounded-20rpx">
    <!-- 卡片 Header START -->
    <view class="px-30rpx pt-30rpx pb-6rpx">
      <ProjectCardHeader
        :project-name="item.name"
        :node-name="item.node_name"
        :state="projectConfigStore.afterSalesStatusStr[item.status?.toString()!]"
        :state-tag-color="getStatusTagColor()"
        :is-hide-current-node="projectConfigStore.afterSalesStatusStr[item.status?.toString()!] === '售后中'"
      />
    </view>
    <!-- 卡片 Header END -->
    <view class="p-30rpx">
      <ProjectTable :info="getTableInfo()" />
    </view>
  </view>
</template>
